<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="../favicon.ico">
     <link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="__STATIC__/layout/css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <!-- jqgrid-->
    <link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
     <link rel="stylesheet" href="__STATIC__/layout/css/channel.css" type="text/css">
    <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
      <style>
      .ren{
    display: inline-block;
    background:#d0e0e0;
    border:1px solid #ccc;
    border-radius:5px;
    margin-right:2px;
    color:#333;
    line-height: 20px;
    height:20px;
    font-size: 12px;
    padding-left:5px;
    padding-right:5px;
}
    </style>
</head>

<body style="color:#333;padding:3px;">
    <div class="row-margin-top">
   <form action="#" method="post" id="form_check" class="form-inline">
    <input type="hidden" name="zid" id="zid"/>
      <table class="row-margin-top tab-content table-bordered  table" border="1" style="margin-bottom: 0">
             <tr>
          <td style="min-width: 120px;width: 120px"><label for="" class="form-label">财年</label></td>
          <td> <select name="cid" id="cid" class="form-control">
              {volist name="cainian" id="c"}
                <option value="{$c.id}" {if $cid==$c.id} selected {/if}>{$c.title}</option>
              {/volist} 
           </select></td>
            </tr>
            <tr>
          <td style="min-width: 120px;width: 120px"><label for="" class="form-label">经销商</label></td>
             <td>
                 
                <div class="col-xs-8">
                        <div class="input-group" id="" >
                            <input type="text"   placeholder="请输入关键字或空格查询" class="form-control inputremindPeple" id="fenqu"  value="">
                           
                            <div class="input-group-btn">
                                <ul class="dropdown-menu dropdown-menu-right" role="menu">
                                </ul>
                            </div>
                        </div>
                    </div>
             </td>
            </tr>
            <tr>
            <td style="min-width: 120px;width: 120px"></td>
             <td id="selected_fenqu">
            {volist name="fenqu" id="j"}
              <span class="ren netlist" data-id="{$j.id}">{$j.title}<span class="close">×</span></span>
            {/volist}
           </td>
            </tr>
           <tr>
            <td class="text-center" colspan="2">
              <button class="btn btn-info query">查询</button>
              <button class="btn btn-info emptyIf" type="button">清空</button>
              <button class="btn btn-info LendExcel" type="button">导出Excel</button>
            </td>
            </tr>
      </table>
          <div class="row" style="margin:0;padding: 10px 0">
              <div class="col-md-6" style="background: #dedfde;margin:0 10px ">
                 <div class="echarts" id="echarts-pie-chart" style="width: 100%;height:360px;font-size:20px"></div>
               
              </div>
               <div class="col-md-5">
                    <table class="table-bordered table">
               <tr class="info">
                  <th class="text-center">一级费用科目</th>
                  <th class="text-center">二级费用科目</th>
                  <th class="text-center">科目</th>
                  <th class="text-center">占比</th>
                  <th class="text-center">投入额</th>
               </tr>
               <tbody>
               {volist name="kemu" id="vo"}
                  <tr>
                    <td>{$vo.kemu1}</td>
                    <td>{$vo.kemu2}</td>
                    <td>{$vo.kemu3}</td>
                    <td class="text-right"><span class="ObjectNum">{$vo.bili}</span>%</td>
                    <td class="ObjectNum">{$vo.jine}</td>
                  </tr>
                {/volist}
                  
               </tbody>
               <tfoot>
                  <tr class="trTotal text-right">
                    <td colspan="3"></td>
                    <td>总计：</td>
                    <td>{$zong}</td>
                  </tr>
               </tfoot>
            </table>
               </div>
          </div>
</form>
    </div>
    <!-- 全局js -->
    <script src="__STATIC__/layout/js/jquery.min.js?v=2.1.4"></script>
    <script src="__STATIC__/layout/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="__STATIC__/layout/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
      <script src="__STATIC__/layout/js/common.js"></script>
      <script src="__STATIC__/layout/js/plugins/echarts/echarts-all.js"></script>
       <script src="__STATIC__/layout/js/plugins/suggest/bootstrap-suggest.min.js"></script>
    <script>
     $(document).on("click",".close",function(){
          $(this).parent().remove();
       })
      $(".emptyIf").click(function(){
        location.href="{:url('jxskemu')}"
      })
    $(".query").click(function(){
      
      var jarr=[];var i=0;
      $(".ren").each(function(){
        jarr[i]=$(this).attr("data-id");i++;
      })
      var jid=0;
      if(jarr.length>0){
        var jid=jarr.join(',')
      }
      $("#zid").val(jid);
      document.getElementById("form_check").submit();
    })
     $(".LendExcel").click(function(){
          var jarr=[];var i=0;
          $(".ren").each(function(){
            jarr[i]=$(this).attr("data-id");i++;
          })
          var jid=0;
          if(jarr.length>0){
            var jid=jarr.join('-')
          }
          var cid=$("#cid").val();
          window.open("{:url('kemudaochu')}?tid=4&cid="+cid+"&zid="+jid)
      })
         //产品网点搜索自动补全
    $("#fenqu").bsSuggest({
        url: "{:url('select/myjxsjson')}",
        /*effectiveFields: ["userName", "shortAccount"],
         searchFields: [ "shortAccount"],*/
        effectiveFieldsAlias:{title: "名称"},
        ignorecase: true,
        showHeader: true,
        showBtn: false,     //不显示下拉按钮
        delayUntilKeyup: true, //获取数据的方式为 firstByUrl 时，延迟到有输入/获取到焦点时才请求数据
        idField: "id",
        keyField: "title",
        clearable: true
    }).on('onSetSelectValue', function (e, keyword, data) {
        $(this).val('')
        var bool = false
        $('#selected_fenqu .ren').each(function (idx,o) {
            if($(this).data('id') == keyword.id){
                bool = true;
            }
        })
        if(bool == false){
            $('#selected_fenqu').append('<span class="ren netlist" data-id="'+keyword.id+'">'+keyword.key+'<span class="close">×</span></span>')
        }
    });
       $(document).ready(function(){
            var $ObjectNum =$(".ObjectNum");
               toNum($ObjectNum);


        /*清空*/
        $(document).on("click","#emptythis",function(){
          $(this).parent().remove();
        })
             });

        $(function(){
            /*饼状图*/
            var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
       var pieoption = {
        title : {
            text: '二级科目费用与总费用占比',
            subtext: true,
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient : 'vertical',
            x : '10%',
            data:[{volist name="kemu" id="vo"} '{$vo.kemu3}', {/volist}]
        },
        series : [
            {
                name:'访问来源',
                type:'pie',
                radius : '60%',
                selectedMode: 'single', //单一选中模式 
                center: ['50%', '60%'],
                data:[
                  {volist name="kemu" id="vo"}
                    {value:{$vo.jine}, name:'{$vo.kemu3}'},
                   {/volist}
                ],
                itemStyle:{  
                emphasis: {  
                    shadowBlur: 10,  
                    shadowOffsetX: 0,  
                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                }  
              }  
            }
        ]
    };
    pieChart.setOption(pieoption);
    $(window).resize(pieChart.resize);
  })
    </script>

</body>

</html>
